// theme config
$iosBtnFontColor: #007aff;
$mdBtnFontColor: #00bbd3;


// animate config
@mixin animate-mode($duration) {
	-moz-animation-duration: $duration;
	-webkit-animation-duration: $duration; 
	animation-duration: $duration;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@mixin animate-name($animateName) {
	-moz-animation-name: $animateName; 
	-webkit-animation-name: $animateName; 
	animation-name: $animateName;
}


::-moz-focus-inner { border-color: transparent; }
.dialog {
    position: fixed;
    left: 0; 
    top: 0; 
    z-index: 10001; 
    width: 100%; 
    height: 100%; 
}
.dialog-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10002;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.5);
}
.dialog-content {
	position: absolute;
	top: 50%; 
	left: 50%; 
	z-index: 10003; 
	width: 90%; 
	-webkit-transform: translate(-50%, -50%); 
	transform: translate(-50%, -50%);
	line-height: 1.5; 
	background-color: rgba(255,255,255,0.95); 
	border-radius: 10px;

	* {
	    box-sizing: border-box;
	    -webkit-box-sizing: border-box; 
	    margin: 0; 
	    padding: 0; 
	    border: 0; 
	    outline: none; 
	    -moz-user-select: none;
	    -webkit-tap-highlight-color: rgba(0,0,0,0);
	    font-family: Helvetica;
	    font-size: 15px;
	}
}
.dialog-btn, .dialog-btn-hl { 
    position: relative; 
    display: inline-block; 
    height: 44px;
    line-height: 44px;
    color: $iosBtnFontColor; 
    font-size: 17px;
    font-weight: 400; 
    cursor: pointer; 
    text-decoration: none; 
    background-color: rgba(0,0,0,0); 

    &:hover, &:active { background-color: rgba(0, 0, 0, 0.05); }
}
.dialog-content-hd { 
    position: relative; 
    padding: 20px 20px 10px; 
    margin-bottom: -25px; 
    text-align: center;
    
    .dialog-content-title { 
        font-size: 18px; 
        font-weight: 400; 
        color: #333; 
    }

    .dialog-btn-close {
			display: block;	
			width: 26px; 
			height: 26px; 
			overflow: hidden; 
			position: absolute; 
			top: 18px; 
			right: 15px; 
			cursor: pointer; 
			background-color: rgba(0,0,0,0);

			span { 
				display: none; 
			}
		
			&:before, &:after {
				content: ""; 
				display: block; 
				width: 18px;
				height: 1px;
				background-color: #808080;
				position: absolute;
				top: 13px;
				right: 3px;	
			}
			&:before { 
				-webkit-transform: rotate(45deg); 
				transform: rotate(45deg); 
			}
			&:after { 
				-webkit-transform: rotate(-45deg); 
				transform: rotate(-45deg); 
			}
		}
}
.dialog-content-bd {
    margin: 25px 20px; color: #666;
    text-align: center;

    p { padding: 5px 0; }
}
.content-scroll {
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.dialog-content-ft { 
	display: -webkit-box;
	display: -webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
	position: relative; 
	font-size: 0;

	&:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px; 
		border-top: 1px solid #d5d5d5; 
		color: #d5d5d5;
		-webkit-transform-origin: 0 0; 
		transform-origin: 0 0; 
		-webkit-transform: scaleY(0.5); 
		transform: scaleY(0.5);
	}

	.dialog-btn { 
		-webkit-box-flex: 1; 
		-webkit-flex: 1; 
		-ms-flex: 1; 
		flex: 1; 
		display: block;

		&:after {
			content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; border-left: 1px solid #d5d5d5; color: #d5d5d5;
			-webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
		}

		&:first-child { 
			border-bottom-left-radius: 8px; 

			&:after { border-left: none; }
		}

		&:last-child { border-bottom-right-radius: 8px; }
	}
}

.dialog-content-ft.stacked {
	flex-flow: column;
	display: block;
	
	&:after { border: none; }

	.dialog-btn {
		position: relative;
		display: block;
		width: 100%;

		&:after {
			content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d5d5d5; color: #d5d5d5;
			-webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
		}
	}
}

.dialog-open .dialog-content, 
.dialog-open .dialog-overlay,
.dialog-close .dialog-content, 
.dialog-close .dialog-overlay {
	@include animate-mode(0.25s);
}
.dialog-open {
	.dialog-content { @include animate-name(zoom-in); }
	.dialog-overlay { @include animate-name(fade-in); }
}
.dialog-close {
	.dialog-content { @include animate-name(fade-out); }
	.dialog-overlay { @include animate-name(fade-out); }
}


/**-------------------------
 *  android style
 **------------------------*/
// [data-platform=android] {
[data-style=android] {
	.dialog-content {
	    -webkit-box-sizing: content-box; 
	    box-sizing: content-box; 
	    border-radius: 0; 
	    background-color: rgba(255,255,255,1);
	}

	.dialog-content-hd {
		text-align: left; 
		padding: 20px 20px 0;
		margin-bottom: -10px;

		.dialog-btn-close {
			top: 15px; 
			right: 15px; 
		}
	}

	.dialog-content-bd { margin: 25px 20px; text-align: left; }

	.dialog-content-ft { 
		display: block; 
		padding: 8px; 
		margin-top: -10px; 
		text-align: right; 

		&:after { border: none; }

		.dialog-btn {
			display:inline-block;
			min-width: 60px; 
			height: 36px; 
			line-height: 36px; 
			overflow: hidden; 
			padding: 0 13px; 
			font-size: 16px; 
			color: #808080;
			text-align: center; 
			border-radius: 2px;

			&:after { border: none; }
		}

		.dialog-btn-confirm, .dialog-btn-hl { color: $mdBtnFontColor; }
	}
	.dialog-content-ft.stacked {
		.dialog-btn {
			display: block;
			text-align: right;
			width: 100%;
		}
	}
	.dialog-content-ft-border {
		&:before {
			content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d5d5d5; color: #d5d5d5;
			-webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
		}
	}
	
}
[data-style=android].dialog-open {
	.dialog-content { @include animate-name(bounce-in-down); }
	.dialog-overlay { @include animate-name(fade-in); }
}
[data-style=android].dialog-close {
	.dialog-content { @include animate-name(bounce-out-up); }
	.dialog-overlay { @include animate-name(fade-out); }
}



/* toast */
.dialog-toast {
	.dialog-overlay { background-color: rgba(0,0,0,0); }
	
	.dialog-content { 
		width: 148px; 
		height: 148px; 
		border-radius: 10px; 
		background-color: rgba(0,0,0,0.8);
		display: table; 
	}
	.dialog-content-bd { 
		margin: 0;
		padding: 0;
		font-size: 0;
		position: relative; 
		width: 100%; 
		height: 100%; 
		display:table-cell;
		text-align: center;
		vertical-align:middle;

		p { margin: 0; padding: 0; }
	}
	.info-icon { 
	    width: 56px;
	    max-width: 56px;
	}
	.info-text { 
		display: block; 
		width: 90%;
		margin: 12px auto 0;
		font-size: 16px; 
		color: #fff; 
	}
}
.dialog-toast.dialog-open .dialog-content, 
.dialog-toast.dialog-open .dialog-overlay {
	@include animate-mode(0.5s);
}
.dialog-toast.dialog-close .dialog-content,
.dialog-toast.dialog-close .dialog-overlay {
	@include animate-mode(0.35s);
}
.dialog-toast.dialog-open {
	.dialog-content { 
		@include animate-name(fade-in);
	}
	.dialog-overlay { 
		@include animate-name(fade-in);
	}
}
.dialog-toast.dialog-close {
	.dialog-content { 
		@include animate-name(fade-out);
	}
	.dialog-overlay { 
		@include animate-name(fade-out);
	}
}


/* notice */
.dialog-notice {
	.dialog-overlay { background-color: rgba(0,0,0,0); }
	.dialog-content { 
		display: table; 
		width: auto; 
		max-width: 85%; 
		border-radius: 4px; 
		background-color: rgba(0,0,0,0.8);
	}
	.dialog-content-bd {
		margin: 0;
		font-size: 0;
		padding: 10px 15px;
		line-height: normal;
	}
	.info-icon { 
		width: 16px;
		max-width: 16px;
		margin: 0 2px;
		vertical-align: middle;
		position: relative; 
		top: -1px; 
	}
	.info-text {		
		margin: 0 2px;
		font-size: 14px;
		color: #fff;
		line-height: 1.3;
		vertical-align: middle;
	}

}
.dialog-notice.dialog-open .dialog-content, 
.dialog-notice.dialog-open .dialog-overlay {
	@include animate-mode(0.1s);
}
.dialog-notice.dialog-close .dialog-content, 
.dialog-notice.dialog-close .dialog-overlay {
	@include animate-mode(0.3s);
}
.dialog-notice.dialog-open {
	.dialog-content { @include animate-name(fade-in); }
	.dialog-overlay { @include animate-name(fade-in); }
}
.dialog-notice.dialog-close {
	.dialog-content { @include animate-name(fade-out); }
	.dialog-overlay { @include animate-name(fade-out); }
}
.dialog-notice-bottom .dialog-content { 
	top: auto; 
	bottom: 0; 
	-webkit-transform: translate(-50%, -20px);
	transform: translate(-50%, -20px); 
}
.dialog-notice-bottom.dialog-open .dialog-content, 
.dialog-notice-bottom.dialog-open .dialog-overlay,
.dialog-notice-bottom.dialog-close .dialog-content, 
.dialog-notice-bottom.dialog-close .dialog-overlay {
	@include animate-mode(0.3s);
}
.dialog-notice-bottom.dialog-open .dialog-content { @include animate-name(bounce-in-up); }
.dialog-notice-bottom.dialog-close .dialog-content { @include animate-name(fade-out); }
 




/**-------------------------
 *  meida query
 **------------------------*/
@media screen and (min-width: 1023px) {
    .dialog-content { max-width: 40%; }
}
@media screen and (min-width: 767px) {
    .dialog-content { max-width: 60%; }
}






/**-------------------------
 *  animate library
 **------------------------*/
@-webkit-keyframes zoom-in {
	0% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(1.2, 1.2); }
	100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1, 1); }
}
@keyframes zoom-in {
	0% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(1.2, 1.2); transform: translate(-50%, -50%) scale(1.2, 1.2); }
	100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1, 1); transform: translate(-50%, -50%) scale(1, 1); }
}
@-webkit-keyframes zoom-out {
	0% { opacity: 1; }
	100% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8, 0.8); }
}
@keyframes zoom-out {
	0% { opacity: 1; }
	100% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.8, 0.8); transform: translate(-50%, -50%) scale(0.8, 0.8); }
}


@-webkit-keyframes fade-in {
	  0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes fade-in {
	  0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fade-out {
	  0% { opacity: 1; }
	100% { opacity: 0; }
}
@-webkit-keyframes fade-out {
	  0% { opacity: 1; }
	100% { opacity: 0; }
}

@-webkit-keyframes bounce-in-down {
	0% { opacity: 0; -webkit-transform: translate(-50%, -75%); }
	100% { opacity: 1; -webkit-transform: translate(-50%, -50%); }
}
 @keyframes bounce-in-down {
	0% { opacity: 0; -webkit-transform: translate(-50%, -75%); transform: translate(-50%, -75%); }
	100% { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
} 

@-webkit-keyframes bounce-out-up {
	0% { opacity: 1; -webkit-transform: translate(-50%, -50%); }
	100% { opacity: 0; -webkit-transform: translate(-50%, -75%); }
}
@keyframes bounce-out-up {
	0% { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
	100% { opacity: 0; -webkit-transform: translate(-50%, -75%); transform: translate(-50%, -75%); }
}


@-webkit-keyframes bounce-in-up {
	  0% { opacity: 0; -webkit-transform: translate(-50%, 0); }
	 80% { opacity: 1; -webkit-transform: translate(-50%, -24px); }
	100% { opacity: 1; -webkit-transform: translate(-50%, -20px); }
}
 @keyframes bounce-in-up {
	  0% { opacity: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
	 80% { opacity: 1; -webkit-transform: translate(-50%, -24px); transform: translate(-50%, -24px); }
	100% { opacity: 1; -webkit-transform: translate(-50%, -20px); transform: translate(-50%, -20px); }
} 

@-webkit-keyframes bounce-out-down {
	  0% { opacity: 1; -webkit-transform: translate(-50%, -20px); }
	100% { opacity: 0; -webkit-transform: translate(-50%, 0); }
}
@keyframes bounce-out-down {
	  0% { opacity: 1; -webkit-transform: translate(-50%, -20px); transform: translate(-50%, -20px); }
	100% { opacity: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
}